<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
   
    <div id="app">
     <h1>根组件内容：{{msg}}</h1> 
     <test :xxx="msg"></test>
     <counter :n="n"></counter>
     <counter :n="n"></counter>
     <counter :n="n"></counter>

     <ul>
        <post-item v-for="item in posts" 
        :post="item"
        :title="item.title">
    </post-item>
     </ul>
    </div>
    <script>
    Vue.component('post-item',{
        props:['post','title'],
        template:'<div><h3> title:{{post}} </h3><p>content:{{post.content}}</p></div>'
    });
    //每个组件必须只有一个根元素
    Vue.component('test',{
        props:['xxx'],
        template:'<p> test组件 {{xxx}} </p>'
    });
    Vue.component('counter',{
        props:['n'],
        template:"<p @click='count++'>parent n is {{n}},you clicked {{count}} times</p>",
        //不能直接修改props的值，只能修改自己的data
        //所有的组件都只能修改自身的data
        
        // data:{
            //     count:5,
            // }  报错
            //组件内的函数必须是一个函数 返回一个对象
            //因此每个实例可以提供一份被返回对象的独立的拷贝
            data:function(){
                return{
                    count:5
                }
            }
        });
        var vm=new Vue({
            el:"#app",
            data:{
              msg:'hello vue',
              n:10,
              posts:[
                {title:"123",content:"123content"},
                {title:"456",content:"456content"},
                {title:"789",content:"789content"},
              ]
            },

          
        });
      
    </script>
</body>
</html>